<template>
    <div>
        <el-row :gutter="20" justify="center">
            <el-col :span="12">
                <el-card style="marginTop:50px">
                    <template #header>
                        <div class="clearfix">
                            <span>个人信息</span>
                        </div>
                    </template>
                    <div class="info">
                        <div class="info-image" title="点击切换头像">
                            <el-avatar :size="80" shape="square" :src="`/src/assets/images/user/${user.image}.webp`"
                                fit="cover" />
                        </div>
                        <div class="info-name">
                            {{ user.nickname }}
                        </div>
                    </div>
                    <el-form label-width="90px">
                        <el-form-item label="用户id: ">
                            {{ user.id }}
                        </el-form-item>
                        <el-form-item label="用户名: ">
                            {{ user.username }}
                        </el-form-item>
                        <el-form-item label="昵称: ">
                            {{ user.nickname }}
                        </el-form-item>
                        <el-form-item label="账户等级: ">
                            <el-tag v-if="user.status === 2">超级管理员</el-tag>
                            <el-tag type="success" v-else-if="user.status === 1">管理员</el-tag>
                            <el-tag type="info" v-else-if="user.status === 0">普通用户</el-tag>
                        </el-form-item>
                    </el-form>
                    <el-button style="marginLeft:300px" type="primary" @click="showEdit">修改个人信息</el-button>
                    <el-dialog title="个人信息修改" v-model="dialogFormVisible">
                        <el-form label-position="left" label-width="80px" :rules="addRules" :model="editForm" ref="editRef" v-loading="loading">
                            <el-form-item label="用户名" prop="username" style="margin-bottom: 20px;">
                                <el-input v-model="editForm.username" placeholder="用户名"></el-input>
                            </el-form-item>
                            <el-form-item label="修改密码" style="margin-bottom: 20px;">
                                <el-switch v-model="editForm.editPasword" />
                            </el-form-item>
                            <el-form-item label="原密码" prop="oldPassword" style="margin-bottom: 20px;" v-if="editForm.editPasword">
                                <el-input placeholder="原密码" v-model="editForm.oldPassword"></el-input>
                            </el-form-item>
                            <el-form-item label="新密码" prop="password" style="margin-bottom: 20px;" v-if="editForm.editPasword">
                                <el-input placeholder="新密码" v-model="editForm.password"></el-input>
                            </el-form-item>
                            <el-form-item label="用户昵称" prop="nickname" style="margin-bottom: 20px;">
                                <el-input v-model="editForm.nickname"></el-input>
                            </el-form-item>
                            <el-form-item label="用户头像" prop="image">
                                <el-select v-model="editForm.image" placeholder="用户头像" class="handle-select mr10">
                                    <el-option :key="index" :label="item" :value="item" v-for="(item, index) in 8">
                                        <el-image style="float: left;width: 30px; height: 30px" class="table-td-thumb"
                                            :src="`/src/assets/images/user/${item}.webp`" :z-index="10"
                                            preview-teleported>
                                        </el-image>
                                        <span style="float: right;font-size: 13px;">{{ item }}</span>
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                        <template #footer>
                            <span class="dialog-footer">
                                <el-button @click="dialogFormVisible = false">取消</el-button>
                                <el-button type="primary" @click="submit(editRef)" :loading="loading">提交</el-button>
                            </span>
                        </template>
                    </el-dialog>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts" name="user">
import { reactive, ref,watch } from 'vue';
import { useUserStore } from '@/store/index';
import { FormRules } from 'element-plus/es/tokens/form';
import {updateSelf} from '@/api/user'
import { ElMessage } from 'element-plus'

const userStore = useUserStore();
const user = userStore.userInfo;
const dialogFormVisible = ref(false)
const editRef:any = ref(null)
const loading = ref(false)
const addRules: FormRules = {
    username: [{ required: true, message: '请输入用户名', trigger: 'blur' },{min:6,max:30,message: '用户名为6-30字符', trigger: 'blur'}],
    nickname: [{ required: true, message: '请输入昵称', trigger: 'blur' },{max:30,message: '昵称最大为30字符', trigger: 'blur'}],
    image: [{ required: true, message: '请选择用户头像', trigger: 'blur' }],
};
const editForm = reactive({
    username:'',
    password:'',
    oldPassword:'',
    nickname:'',
    image:0,
    editPasword:false
})
const showEdit = () =>{
    dialogFormVisible.value = true;
    editForm.username = user.username;
    editForm.password = user.password;
    editForm.nickname = user.nickname;
    editForm.image = Number(user.image);
}
const submit = (form:any) =>{
    form.validate((valid: boolean) => {
        if (!valid) return; 
        loading.value = true;
        const params:any = {
            username:editForm.username,
            nickname:editForm.nickname,
            image:String(editForm.image),
        }
        if(editForm.editPasword){
            params.password = editForm.password;
            params.oldPassword = editForm.oldPassword;
        }
        updateSelf(params).then((res:any)=>{
            if(res.code !== 200) return ElMessage.error(res.msg || '更新失败')
            ElMessage.success('更新成功')
            user.nickname = editForm.nickname;
            user.image = String(editForm.image);
            user.username = editForm.username;
            dialogFormVisible.value = false
            // 更新token
            window.localStorage.setItem('userinfo',res.data.token);
        }).finally(()=>loading.value = false)
    })
    
}
watch(()=>editForm.editPasword,(newVal)=>{
    if(newVal){
        addRules.oldPassword=[{ required: true, message: '请输入原密码', trigger: 'blur' }];
        addRules.password=[{ required: true, message: '请输入新密码', trigger: 'blur' }]
    }else{
        delete addRules.oldPassword
        delete addRules.password
    }
})
</script>
<style scoped>
.xuan1 {
    border: blue 2px solid;
}

.imagedec {
    box-sizing: content-box;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.info {
    text-align: center;
    padding: 35px 0;
}

.info-image {
    position: relative;
    margin: auto;
    width: 100px;
    height: 100px;
    background: #f8f8f8;
    border: 1px solid #eee;
    border-radius: 50px;
    overflow: hidden;
}

.info-edit {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.info-edit i {
    color: #eee;
    font-size: 25px;
}

.info-image:hover .info-edit {
    opacity: 1;
}

.info-name {
    margin: 15px 0 10px;
    font-size: 24px;
    font-weight: 500;
    color: #262626;
}

.crop-demo-btn {
    position: relative;
}

.crop-input {
    position: absolute;
    width: 100px;
    height: 40px;
    left: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
}
</style>
